<template>
  <div>
    <!-- 第一部分，登录部分以及钱包 -->
    <div class="center-head">
      <div class="head">
        <span class="user-img"
          ><img src="@/assets/img/avator.png" alt="" width="100%" height="100%"
        /></span>
        <span class="user-login"><a href="#">立即登录</a></span>
      </div>
      <div class="head-info">
        <div class="order">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-youhuiquan"></use>
          </svg>
          <p>电影订单</p>
        </div>
        <div class="my-order">
          <div>
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-dingdan"></use>
            </svg>
          </div>
          <p>商品订单</p>
        </div>
      </div>
    </div>
    <!-- 第二部分，页面主体部分 -->
    <div class="main-info">
      <div class="info">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-qianbao"></use>
        </svg>
        <span class="buy">卖座券</span>
      </div>
      <div class="info">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-hongbao"></use>
        </svg>
        <span class="buy">组合红包</span>
      </div>
      <div class="info">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-yue01"></use>
        </svg>
        <span class="buy">余额</span>
      </div>
      <div class="info">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-kefu"></use>
        </svg>
        <span class="buy">客服</span>
      </div>
      <div class="info">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-shezhi"></use>
        </svg>
        <span class="buy">设置</span>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.center-head {
  height: auto;
  overflow: hidden;
  width: 100vw;
  .head {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    height: 160px;
    // margin-top: 20px;
    background-color: orange;
    border-bottom: 1px solid #ccc;
   
    .user-img {
      margin-left: 30px;
      width: 70px;
      height: 70px;
      margin-right: 34px;
      img {
        border-radius: 50%;
      }
    }
    .user-login a {
      color: #fff;
      font-size: 22px;
    }
  }
  .head-info {
    height: 80px;
    display: flex;
    text-align: center;
    justify-content: space-around;
    align-items: center;
    border-bottom: 1px solid #ccc;
    .icon{
      font-size: 28px;
    }
  }
}
.info {
  height: 40px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding-left: 20px;
  border-bottom: 1px solid #ccc;
  .icon {
    font-size: 28px;
  }
  .buy {
    margin-left: 15px;
    font-size: 18px;
    color: #191a1b;
  }
}
</style>